<%-- 
    Document   : showAdmin
    Created on : Mar 9, 2011, 8:28:54 PM
    Author     : Nguyen Viet Dung
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
int year = 2011;
String status = "=5";
try {
    year = Integer.parseInt(request.getParameter("ddlYear"));
    status = request.getParameter("ddlStatus");
} catch(Exception ex) { }
%>
<div class="section table_section">
    <!--[if !IE]>start title wrapper<![endif]-->
    <div class="title_wrapper">
        <h2>
        <form name="frmYear" action="?option=statistics&action=financialInYear" method="post" >
            Statistics Financial In Year
         :<select name="ddlYear" onchange="this.form.submit()">
            <option value="2010">2010</option>
            <option value="2011" selected>2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            </select>
         Based On :
         <select name="ddlStatus" onchange="this.form.submit()">
             <option value=">0" >All the bills</option>
             <option value=">1" >All the bills have been accpect onwards</option>
             <option value=">2" >All the bills have been paid onwards</option>
             <option value=">3" >All the bills have been on-going onwards</option>
             <option value="=5" selected>All the bills have been Completed</option>
             <option value="=1" >All the bills have been Reject</option>
            </select>
        </form>
        </h2>
        <!--[if !IE]>start section menu<![endif]-->
        <ul class="section_menu">
            <li></li>
            <li><a href="javascript:window.location.href='?option=statistics';" class="active"><span><span>GO BACK</span></span></a></li>
            <li></li>
            <li></li>
        </ul>
        <!--[if !IE]>end section menu<![endif]-->

        <span class="title_wrapper_left"></span>
        <span class="title_wrapper_right"></span>
    </div>
    <!--[if !IE]>end title wrapper<![endif]-->
    
    <script>document.frmYear.ddlYear.value = <%=year %>; document.frmYear.ddlStatus.value = '<%=status %>';</script>
    <!--[if !IE]>start section content<![endif]-->
    <div class="section_content">
        <!--[if !IE]>start section content top<![endif]-->
        <div class="sct">
            <div class="sct_left">
                <div class="sct_right">
                    <div class="sct_left">
                        <div class="sct_right">
                            <!--[if !IE]>start table_wrapper<![endif]-->
                            <div class="table_wrapper">
                                <div class="table_wrapper_inner">
                                <div id="container">
                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                    <!------------------------------------------------->

                                    <script type="text/javascript" src="js/report-jquery.min.js"></script>
                                    <script type="text/javascript" src="js/highcharts.js"></script>
                                    <!--[if IE]>
                                        <script type="text/javascript" src="js/excanvas.compiled.js"></script>
                                    <![endif]-->
                                    <%

                                    java.sql.Connection connection = (java.sql.Connection)application.getAttribute("APP_CONN");
                                    double[] month = (new org.nvdung.db.SqlStatistic(connection)).getFinancialByYear(year,status);
                                    %>
                                    <!-- 2. Add the JavaScript to initialize the chart on document ready -->

                                    <% double total = 0; for (int i=0;i<month.length;i++) total+=month[i]; %>

                                    <script type="text/javascript">
                                    $(document).ready(function() {
                                            var chart = new Highcharts.Chart({
                                                    chart: {
                                                            renderTo: 'container1',
                                                            defaultSeriesType: 'spline'
                                                    },
                                                    title: {
                                                            text: 'Monthly Average Financial in Year <%=year %> (Total annual : <%=total %> USD)'
                                                    },
                                                    subtitle: {
                                                            text: 'Group 49 - Alluring Decors'
                                                    },
                                                    xAxis: {
                                                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                                                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                                                            title: {
                                                                    text: 'Month'
                                                            }
                                                    },
                                                    yAxis: {
                                                            title: {
                                                                    text: 'Revenue (USD)'
                                                            }
                                                    },
                                                    legend: {
                                                            enabled: false
                                                    },
                                                    tooltip: {
                                                            formatter: function() {
                                                            return '<b>'+ this.series.name +'</b><br/>'+
                                                                            this.x +': '+ this.y +'USD';
                                                            }
                                                    },
                                                    plotOptions: {
                                                            spline: {
                                                                    cursor: 'pointer',
                                                                    point: {
                                                                            events: {
                                                                                    click: function() {
                                                                                            alert ('this.category: '+ this.category +'\nthis.y: '+ this.y);
                                                                                    }
                                                                            }
                                                                    }
                                                            }
                                                    },
                                                    series: [{
                                                            name: 'Revenue',
                                                            data : [
                                                                <% for (int i=0;i<month.length;i++) { %>
                                                                    <%=month[i] %>,
                                                                <% } %>
                                                            ]
                                                    }]
                                            });


                                    });
                                    </script>



                                    <div id="container1" style="width: 800px; height: 400px; margin: 0 auto"></div>


                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                </div>
                                </div>
                            </div>
                            <!--[if !IE]>end table_wrapper<![endif]-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--[if !IE]>end section content top<![endif]-->
        <!--[if !IE]>start section content bottom<![endif]-->
        <span class="scb"><span class="scb_left"></span><span class="scb_right"></span></span>
        <!--[if !IE]>end section content bottom<![endif]-->
    </div>
    <!--[if !IE]>end section content<![endif]-->
</div>